<template>
  <div class="cluster-container">
    <div class="cluster-header">
      <el-image
        style="width: 100px; height: 100px"
        :src="require('@/assets/header_images/clusterManage.png')"
      ></el-image>
      <div class="title">
        集群总览
        <div class="title-content">
          对多集群信息进行统一管理和协调，为容器管理平台提供部署环境，以实现高可用性和资源优化
        </div>
      </div>
    </div>
    <div style="background: #fff; margin-top: 10px; margin-bottom: 10px">
      <div
        style="
          font-weight: bold;
          font-size: 1.125rem;
          margin-top: 5px;
          margin-left: 10px;
        "
      >
        综合资源使用量
      </div>
      <div style="display: flex; justify-content: space-around; height: 34vh">
        <div
          id="pieChart"
          class="pie-chart"
          style="width: 20rem; height: 16rem"
        ></div>
        <div
          ref="nodeChart"
          class="pie-chart"
          style="width: 20rem; height: 16rem"
        ></div>
      </div>
    </div>
    <div>
      <!--      <div style="overflow-y: scroll;">-->
      <el-table
        :data="clusterOverviewInfo.gvKubeClusterOverviewList"
        style="width: 100%"
        :cell-style="{
          textAlign: 'center',
          fontSize: '14px',
          fontWeight: '700',
        }"
        :header-cell-style="{
          textAlign: 'center',
          fontSize: '17px',
          fontWeight: '700',
        }"
        height="38vh"
      >
        <el-table-column label="集群名称">
          <template slot-scope="scope">
            <span class="descSpan">
              {{ scope.row.clusterZhname }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="集群状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.clusterStatus === '正常'">{{ scope.row.clusterStatus }}</el-tag>
            <el-tag type="danger" v-else>{{ scope.row.clusterStatus }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="CPU(核)" width="180">
          <template slot-scope="scope">
            <span>
              {{ scope.row.clusterCpu }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="CPU申请量(核)">
          <template slot-scope="scope">
            <span style="color: limegreen">
              {{ scope.row.requestCpu }}
            </span>
            <span v-if="scope.row.clusterCpu === 0">
              (0%)
            </span>
            <span v-else>
            ({{ ((scope.row.requestCpu / scope.row.clusterCpu) * 100).toFixed(1) }}%)
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="clusterMem" label="内存(GB)" width="180">
        </el-table-column>
        <el-table-column label="内存申请量(GB)">
          <template slot-scope="scope">
            <span style="color: limegreen">
              {{ scope.row.requestMemory }}
            </span>
            <span v-if="scope.row.clusterMem === 0">
              (0%)
            </span>
            <span v-else>
              ({{ ((scope.row.requestMemory / scope.row.clusterMem) * 100).toFixed(1) }}%)
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="podUsed" label="POD(个)" width="180">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" @click="watchClusterDrawer(scope.row)"
            >监控
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer
      :title="watchClusterName"
      :visible.sync="watchDrawerVisible"
      size="90%"
    >
      <iframe :src="grafanaAddress" width="100%" height="95%"></iframe>
    </el-drawer>
  </div>
</template>

<script>
  export default {
    name: "ClusterOverview",
    data() {
      return {
        clusterOverviewInfo: {
          cpuRequest: 0,
          cpuTotal: 0,
          memoryRequest: 0,
          memoryTotal: 0,
          gvKubeClusterOverviewList: [],
        },
        grafanaAddress: "",
        watchClusterName: "",
        watchDrawerVisible: false,
      };
    },
    methods: {
      getCpuUsage(clusterInfo) {
        // 基于准备好的dom，初始化echarts实例
        const clusterCharts = this.$echarts.init(
          document.getElementById("pieChart")
        );
        const option = {
          series: [
            {
              type: "gauge",
              center: ["50%", "60%"],
              startAngle: 200,
              endAngle: -20,
              min: 0,
              max: 100,
              splitNumber: 4,
              itemStyle: {
                color: "#FFAB91",
              },
              progress: {
                show: true,
                width: 30,
              },
              pointer: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  width: 30,
                  // color: [
                  //   [0.25, '#7CFFB2'],
                  //   [0.5, '#FDDD60'],
                  //   [0.75, '#58D9F9'],
                  //   [1, '#FF6E76']
                  // ]
                },
              },
              axisTick: {
                distance: -45,
                splitNumber: 5,
                lineStyle: {
                  width: 2,
                  color: "#999",
                },
              },
              splitLine: {
                distance: -45,
                length: 14,
                lineStyle: {
                  width: 3,
                  color: "#999",
                },
              },
              axisLabel: {
                distance: -20,
                color: "#999",
                fontSize: 20,
              },
              anchor: {
                show: false,
              },
              title: {
                show: false,
              },
              detail: {
                valueAnimation: true,
                width: "60%",
                lineHeight: 40,
                borderRadius: 8,
                offsetCenter: [0, "-15%"],
                fontSize: 35,
                fontWeight: "bolder",
                formatter: "{value}%",
                color: "inherit",
              },
              data: [
                {
                  value: (
                    (clusterInfo.cpuRequest / clusterInfo.cpuTotal) *
                    100
                  ).toFixed(1),
                },
              ],
            },
            {
              type: "gauge",
              center: ["50%", "60%"],
              startAngle: 200,
              endAngle: -20,
              min: 0,
              max: 100,
              itemStyle: {
                color: "#FD7347",
              },
              progress: {
                show: true,
                width: 8,
              },
              pointer: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              detail: {
                show: false,
              },
              title: {
                offsetCenter: [0, "90%"],
                fontSize: 20,
              },
              data: [
                {
                  value: (
                    (clusterInfo.cpuRequest / clusterInfo.cpuTotal) *
                    100
                  ).toFixed(1),
                  name:
                    "CPU已使用" +
                    clusterInfo.cpuTotal +
                    "核中的" +
                    clusterInfo.cpuRequest +
                    "核",
                },
              ],
            },
          ],
        };
        clusterCharts.setOption(option);
      },
      getMemoryUsage(clusterInfo) {
        // 基于准备好的dom，初始化echarts实例
        const nodeCharts = this.$echarts.init(this.$refs.nodeChart);
        const option = {
          series: [
            {
              type: "gauge",
              center: ["50%", "60%"],
              startAngle: 200,
              endAngle: -20,
              min: 0,
              max: 100,
              splitNumber: 4,
              itemStyle: {
                color: "#FFAB91",
              },
              progress: {
                show: true,
                width: 30,
              },
              pointer: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  width: 30,
                  // color: [
                  //   [0.25, '#FF6E76'],
                  //   [0.5, '#FDDD60'],
                  //   [0.75, '#58D9F9'],
                  //   [1, '#7CFFB2']
                  // ]
                },
              },
              axisTick: {
                distance: -45,
                splitNumber: 5,
                lineStyle: {
                  width: 2,
                  color: "#999",
                },
              },
              splitLine: {
                distance: -45,
                length: 14,
                lineStyle: {
                  width: 3,
                  color: "#999",
                },
              },
              axisLabel: {
                distance: -20,
                color: "#999",
                fontSize: 20,
              },
              anchor: {
                show: false,
              },
              title: {
                show: false,
              },
              detail: {
                valueAnimation: true,
                width: "60%",
                lineHeight: 40,
                borderRadius: 8,
                offsetCenter: [0, "-15%"],
                fontSize: 35,
                fontWeight: "bolder",
                formatter: "{value}%",
                color: "inherit",
              },
              data: [
                {
                  value: (
                    (clusterInfo.memoryRequest / clusterInfo.memoryTotal) *
                    100
                  ).toFixed(1),
                },
              ],
            },
            {
              type: "gauge",
              center: ["50%", "60%"],
              startAngle: 200,
              endAngle: -20,
              min: 0,
              max: 100,
              itemStyle: {
                color: "#FD7347",
              },
              progress: {
                show: true,
                width: 8,
              },
              pointer: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              detail: {
                show: false,
              },
              title: {
                offsetCenter: [0, "90%"],
                fontSize: 20,
              },
              data: [
                {
                  value: (
                    (clusterInfo.memoryRequest / clusterInfo.memoryTotal) *
                    100
                  ).toFixed(1),
                  name:
                    "内存已使用" +
                    clusterInfo.memoryTotal +
                    "GB中的" +
                    clusterInfo.memoryRequest +
                    "GB",
                },
              ],
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        nodeCharts.setOption(option);
      },
      watchClusterDrawer(row) {
        this.$clusterManageApi.getClusterDashboard(row.id).then((res) => {
          if (res && res.code === 200) {
            this.watchDrawerVisible = true;
            this.grafanaAddress = res.data;
            this.watchClusterName = "集群 " + row.clusterZhname + " 监控信息";
          }
        });
      },
      getOverviewInfo() {
        this.$clusterManageApi.getOverviewInfo().then((res) => {
          if (res && res.code === 200) {
            this.clusterOverviewInfo = res.data;
            this.getCpuUsage(res.data);
            this.getMemoryUsage(res.data);
          }
        });
      },
    },
    mounted() {
      this.getOverviewInfo();
    },
  };
</script>

<style scoped>
</style>
